

<ion-header class="home-header" style="box-shadow: 2px 2px 2px #cccccc;">
  <ion-navbar text-center style="background-color: white;padding: 0">
    <img src="../assets/imgs/navbar_logo@2x.png" alt="" style="width: 30%">
    <img src="../assets/imgs/navbar_icon_add_default@2x.png" alt="" class="add-btn">
  </ion-navbar>
</ion-header>

<ion-content style="background-color: #F0F0F0">
  <div style="margin: 24px 5% 0 5%;border-radius: 6px;width: 90%" (click)="goto_timing()">
    <img src="../../assets/imgs/home1.png" alt="" >
    <span style="position: absolute;top:4%;left: 8%;font-size: 60px;color: white;font-weight: lighter">18:50</span>
  </div>
  <p style="padding: 0 5%;margin: 12px 0 12px 0">
    <span style="text-align: left;font-size:18px;line-height: 20px">常用场景</span><span style="float: right;font-size: 24px;line-height: 24px;">></span>
  </p>


  <ion-grid style="height: 240px;padding:0 5%;margin-bottom: 30px;text-align: center">
    <ion-row>
      <ion-col *ngFor="let scene of used_scene" col-3 style="height: 120px;padding:0 2%">
          <ion-card style="padding:0;margin: 0;width: 100%">
            <ion-card-content style="height: 80px;">
              <img src="../assets/imgs/{{scene.icon}}@2x.png" alt="" style="width: 100%">
            </ion-card-content>
          </ion-card>
          <p style="line-height: 20px;margin-top: 12px">{{scene.name}}</p>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!--<ion-card class="card">-->
    <!--<ion-card-content style="padding: 0 0 8px 0">-->
      <!--<div class="home-flex-div" >-->
        <!--<div class="home-flex1"  (click)="scene_switch(0)"  [class.isopen]="is_scene_open[0]">-->
          <!--<img src="../assets/imgs/scene_icon_morning@2x.png" alt="" class="home-img" >-->
        <!--</div>-->
        <!--<div class="home-flex1" (click)="scene_switch(1)"  [class.isopen]="is_scene_open[1]">-->
          <!--<img src="../assets/imgs/scene_icon_sleep@2x.png" alt="" class="home-img">-->
        <!--</div>-->
        <!--<div class="home-flex1" (click)="scene_switch(2)"  [class.isopen]="is_scene_open[2]">-->
          <!--<img src="../assets/imgs/scene_icon_meeting@2x.png" alt="" class="home-img">-->
        <!--</div>-->
        <!--<div class="home-flex1"(click)="scene_switch(3)"  [class.isopen]="is_scene_open[3]">-->
          <!--<img src="../assets/imgs/scene_icon_romantic@2x.png" alt="" class="home-img">-->
        <!--</div>-->
      <!--</div>-->
      <!--<div class="home-flex-div-text">-->
        <!--<div style="flex: 1">-->
          <!--<p class="home-text">起床</p>-->
        <!--</div>-->
        <!--<div style="flex: 1">-->
          <!--<p class="home-text">睡眠</p>-->
        <!--</div>-->
        <!--<div style="flex: 1">-->
          <!--<p class="home-text">会议</p>-->
        <!--</div>-->
        <!--<div style="flex: 1">-->
          <!--<p class="home-text">浪漫</p>-->
        <!--</div>-->
      <!--</div>-->

      <!--<div class="home-flex-div" style="padding-top: 0">-->
        <!--<div class="home-flex1" (click)="scene_switch(4)"  [class.isopen]="is_scene_open[4]">-->
          <!--<img src="../assets/imgs/scene_icon_night@2x.png" alt=""class="home-img">-->
        <!--</div>-->
        <!--<div class="home-flex1" (click)="scene_switch(5)"  [class.isopen]="is_scene_open[5]">-->
          <!--<img src="../assets/imgs/scene_icon_comfort@2x.png" alt=""class="home-img">-->
        <!--</div>-->
        <!--<div class="home-flex1" (click)="scene_switch(6)"  [class.isopen]="is_scene_open[6]">-->
          <!--<img src="../assets/imgs/scene_icon_leisure@2x.png" alt=""class="home-img">-->
        <!--</div>-->
        <!--<div class="home-flex1" (click)="scene_switch(7)"  [class.isopen]="is_scene_open[7]">-->
          <!--<img src="../assets/imgs/scene_icon_cinema@2x.png" alt=""class="home-img">-->
        <!--</div>-->
      <!--</div>-->
      <!--<div class="home-flex-div-text">-->
        <!--<div style="flex: 1">-->
          <!--<p class="home-text">夜间</p>-->
        <!--</div>-->
        <!--<div style="flex: 1">-->
          <!--<p class="home-text">清新</p>-->
        <!--</div>-->
        <!--<div style="flex: 1">-->
          <!--<p class="home-text">下午茶</p>-->
        <!--</div>-->
        <!--<div style="flex: 1">-->
          <!--<p class="home-text">影院</p>-->
        <!--</div>-->
      <!--</div>-->

    <!--</ion-card-content>-->
  <!--</ion-card>-->



  <ion-card class="card">
    <ion-card-content style="padding: 0 0 8px 0">
      <p style="padding: 8px 5% 0 5%">
        <span style="text-align: left;font-size:18px;line-height: 24px">常用设备</span><span style="float: right;font-size: 24px;line-height: 24px;">></span>
      </p>
      <div class="home-flex-div">
        <div class="home-flex1" (click)="scene_device(0)"  [class.isopen]="is_device_open[0]">
          <img src="../assets/imgs/device_icon_icebox_default@2x.png" alt=""class="home-img">
        </div>
        <div class="home-flex1"  (click)="scene_device(1)"  [class.isopen]="is_device_open[1]">
          <img src="../assets/imgs/device_icon_clocurtain_default@2x.png" alt=""class="home-img" >
        </div>
        <div class="home-flex1"  (click)="scene_device(2)"  [class.isopen]="is_device_open[2]">
          <img src="../assets/imgs/device_icon_tv_default@2x.png" alt=""class="home-img">
        </div>
        <div class="home-flex1"  (click)="scene_device(3)"  [class.isopen]="is_device_open[3]">
          <img src="../assets/imgs/device_icon_aircon_default@2x.png" alt=""class="home-img">
        </div>
      </div>
      <div class="home-flex-div-text">
        <div style="flex: 1">
          <p class="home-text">冰箱</p>
        </div>
        <div style="flex: 1">
          <p class="home-text">窗帘</p>
        </div>
        <div style="flex: 1">
          <p class="home-text">电视</p>
        </div>
        <div style="flex: 1">
          <p class="home-text">空调</p>
        </div>
      </div>

      <div class="home-flex-div" style="padding-top: 0">
        <div class="home-flex1"  (click)="scene_device(4)"  [class.isopen]="is_device_open[4]">
          <img src="../assets/imgs/device_icon_game_default@2x.png" alt=""class="home-img">
          <p class="home-text"></p>
        </div>
        <div class="home-flex1"  (click)="scene_device(5)"  [class.isopen]="is_device_open[5]">
          <img src="../assets/imgs/device_icon_leisure_default@2x.png" alt=""class="home-img">
          <p class="home-text"></p>
        </div>
        <div class="home-flex1"  (click)="scene_device(6)"  [class.isopen]="is_device_open[6]">
          <img src="../assets/imgs/device_icon_tablelamp_default@2x.png" alt=""class="home-img">
          <p class="home-text"></p>
        </div>
        <div class="home-flex1"  (click)="scene_device(7)"  [class.isopen]="is_device_open[7]">
          <img src="../assets/imgs/device_icon_fan_default@2x.png" alt=""class="home-img">
          <p class="home-text"></p>
        </div>
      </div>

      <div class="home-flex-div-text">
        <div style="flex: 1">
          <p class="home-text">游戏机</p>
        </div>
        <div style="flex: 1">
          <p class="home-text">开水壶</p>
        </div>
        <div style="flex: 1">
          <p class="home-text">台灯</p>
        </div>
        <div style="flex: 1">
          <p class="home-text">风扇</p>
        </div>
      </div>


    </ion-card-content>
  </ion-card>

</ion-content>
